<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-03 10:30:43
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-13 11:41:24
 * @FilePath: \hy-ui\src\views\taskMassage\components\project\components\tableMode.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pro_table_mode">
    <el-table
      :data="list"
      style="width: 100%"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column
        prop="title"
        label="名称"
        min-width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createByName"
        label="创建人"
        show-overflow-tooltip
        v-if="pro_table_col.createByName"
      >
      </el-table-column>
      <el-table-column
        prop="admin"
        label="管理员"
        show-overflow-tooltip
        v-if="pro_table_col.admin"
      >
        <template slot-scope="scope">
          <span
            style="margin-right: 3px"
            v-for="item in scope.row.admins"
            :key="item.id"
            >{{ item.name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="项目状态"
        show-overflow-tooltip
        :formatter="(row) => getStatus(row.status)"
        v-if="pro_table_col.status"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="项目创建时间"
        show-overflow-tooltip
        :formatter="(row) => formatDate(row.createTime)"
        v-if="pro_table_col.createTime"
      >
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="项目开始时间"
        show-overflow-tooltip
        v-if="pro_table_col.startTime"
        :formatter="(row) => formatDate(row.startTime)"
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="项目结束时间"
        show-overflow-tooltip
        v-if="pro_table_col.endTime"
        :formatter="(row) => formatDate(row.endTime)"
      >
      </el-table-column>
      <el-table-column
        label="完成进度"
        width="180px"
        v-if="pro_table_col.progress"
      >
        <template slot-scope="scope">
          <el-progress
            :percentage="scope.row.progress"
            :text-inside="true"
            :stroke-width="16"
            text-color="#fff"
            v-if="scope.row.progress >= 70 && scope.row.progress !== 100"
          ></el-progress>
          <el-progress
            :percentage="scope.row.progress"
            :text-inside="true"
            :stroke-width="16"
            text-color="#fff"
            status="success"
            v-if="scope.row.progress === 100"
          ></el-progress>
          <el-progress
            :percentage="scope.row.progress"
            :text-inside="true"
            :stroke-width="16"
            status="warning"
            text-color="#fff"
            v-if="scope.row.progress < 70 && scope.row.progress >= 30"
          ></el-progress>
          <el-progress
            :percentage="scope.row.progress"
            :text-inside="true"
            :stroke-width="16"
            status="exception"
            text-color="#333"
            v-if="scope.row.progress < 30"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-dropdown
            @command="(val) => handleOperate(val, scope.row, $event)"
            placement="bottom"
          >
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="2">编辑</el-dropdown-item>
              <el-dropdown-item command="3">详情</el-dropdown-item>
              <el-dropdown-item command="4">删除</el-dropdown-item>
              <el-dropdown-item command="5">完结</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i
            :class="[
              'el-icon-star-off',
              scope.row.followFlag ? 'isCollect' : null,
            ]"
            @click.stop="handleCollect(scope.row)"
            style="margin-left: 8px"
            v-if="scope.row.code"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";
import { collectProApi } from "@/api/task/project.js";
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        [];
      },
    },
    handleOperate: {
      type: Function,
      default: () => {},
    },
    pro_table_col: {
      type: Object,
      default: () => {},
    },
    goproTask: {
      type: Function,
      default: () => {},
    },
    getList: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    async handleCollect(val) {
      const res = await collectProApi(val.followFlag ? "2" : "1", val.id);
      if (res.code === 200) {
        this.$message.success(val.followFlag ? "取消收藏成功" : "收藏成功");
        this.getList();
      }
    },
    handleCurrentChange(row) {
      this.goproTask(row);
    },
    formatDate(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    getStatus(status) {
      const statusMap = {
        0: "未开始",
        1: "进行中",
        2: "已完成",
        3: "已结束",
      };
      return statusMap[status];
    },
  },
};
</script>

<style lang="scss" scoped>
.pro_table_mode {
  padding: 0 20px;
  background: #fff;
  min-height: 77vh;
  ::v-deep .el-tag--medium {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  ::v-deep .el-icon-star-off,
  ::v-deep .el-icon-more {
    color: rgb(189, 188, 186);
    font-size: 20px;
    cursor: pointer;
  }
  .isCollect {
    color: rgb(248, 166, 42);
  }
}
</style>